<template>
    <el-form ref="formRef" :model="formData" label-width="150px">
        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>



        <el-form-item label="图片">
            <el-space wrap>
                <Tuku v-model="formData.img"></Tuku>

            </el-space>

        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formData.status" placeholder="请选择状态" style="width: 240px">
                <el-option v-for="item in categoryStatusData" :key="item.code" :label="item.message"
                    :value="item.code" />
            </el-select>
        </el-form-item>
        <el-form-item label="父类">


            <CategoryTree v-model="formData.parentId"> </CategoryTree>

        </el-form-item>

        <el-form-item label="排序">
            <el-input-number v-model="formData.seq" :min="1" />
        </el-form-item>

        <el-form-item class="button">
            <el-button type="primary" @click="onCheckAndSubmit(formRef)">保存</el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">


import CategoryTree from '@/components/CategoryTree.vue';
import { ElMessage } from 'element-plus'

const route = useRoute()
const categoryStatusData = ref([])
const formRef = ref();
const formData = reactive<any>({
    id: 0,
    name: '',
    status: 1,
    img: "",
    parentId: 0,
    seq: 1
})


onMounted(() => {
    formData.id = route.params.id
    callApi()
})

const callApi = () => {
    categoryApi.select({ id: formData.id }).then((res: any) => {
        formData.name = res[0].name
        formData.parentId = res[0].parentId
        formData.seq = res[0].seq
        formData.img = res[0].img
        formData.status = res[0].status
    })

    enumApi.select({ enumClassName: "CategoryStatus" }).then((res: any) => {
        console.log(res);

        categoryStatusData.value = res
    })


}

const onSubmit = () => {



    if (formData.img == "") {
        ElMessage.error('请上传图片')
        return

    }


    categoryApi.update(formData).then((res: any) => {
        ElMessage.success('保存成功')

    })
}

const onCheckAndSubmit = async (formEl: any) => {

    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            onSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {

    formEl.resetFields()
}
</script>